<template>
  <div>
    <h2>App组件</h2>

    <button @click="comName = 'MyLeft'">Left</button>
    <button @click="comName = 'MyRight'">Right</button>

    <!-- include="MyLeft,MyRight" 表示，这些动态组件，只有MyLeft需要被缓存，其他都不被缓存  -->
    <!-- exclude="组件名" 表示，当前指定的组件不需要被缓存；没有指定的就被缓存了 -->
    <!-- 如果有多个组件需要被缓存或不需要被缓存；多个组件名用逗号隔开，并且中间不能有空格 -->
    <keep-alive include="MyLeft,MyRight">
      <component :is="comName"></component>
    </keep-alive>
  </div>
</template>

<script>
import MyLeft from '@/components/MyLeft.vue'
import MyRight from '@/components/MyRight.vue'

export default {
  data () {
    return {
      comName: 'MyLeft'
    }
  },
  components: { MyLeft, MyRight }
}
</script>

<style lang="less" scoped></style>
